<template>
  <div class="app-container">
    <div v-if="isAuthorized">
      <el-card class="wechat-info-card">
        <div slot="header" class="clearfix">
          <span>微信小程序基础信息</span>
          <el-button style="float: right" type="primary" @click="setConfig">修改配置</el-button>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form label-width="120px">
              <el-form-item label="小程序名称">
                <span>{{ wechatInfo.name }}</span>
              </el-form-item>
              <el-form-item label="介绍">
                <span>{{ wechatInfo.description }}</span>
              </el-form-item>
              <el-form-item label="AppID">
                <span>{{ wechatInfo.AppId }}</span>
              </el-form-item>
              <el-form-item label="Secret">
                <span>{{ wechatInfo.AppSecret }}</span>
              </el-form-item>
              <el-form-item label="logo">
                <el-image :src="wechatInfo.headimg" style="width: 100px; height: 100px" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="wechat-info-card margin-top-sm">
        <div slot="header" class="clearfix">
          <span>微信小程序授权信息</span>
          <el-button style="float: right" type="primary" @click="authorize">重新授权</el-button>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form label-width="120px">
              <el-form-item label="appid">
                <span>{{ open.authorizer_appid }}</span>
              </el-form-item>
              <el-form-item label="access_token">
                <span>{{ open.authorizer_access_token }}</span>
              </el-form-item>
              <el-form-item label="refresh_token">
                <span>{{ open.authorizer_refresh_token }}</span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="已授权功能" name="1">
                <el-tag
                  v-for="(func, index) in open.func_info"
                  :key="index"
                  class="margin-right-sm"
                  type="success"
                >
                  {{ func }}
                </el-tag>
              </el-collapse-item>
              <!-- 其他功能项可以继续添加 -->
            </el-collapse>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div v-else>
      <el-button @click="authorize">点击授权</el-button>
    </div>
  </div>
</template>

<script>
import { fetchConfigInfo, registerMiniprogram } from '../api/register'
export default {
  data() {
    return {
      isAuthorized: false, // 初始化为未授权状态
      wechatInfo: {},
      open: {}
    }
  },
  created() {
    this.getWeChatInfo()
    registerMiniprogram().then(res => {
      console.log('registerMiniprogram', res)
    })
  },
  methods: {
    setConfig() {
      this.$router.push({
        name: 'diandi-subscription-settings-index',
        params: {
          activeName: 'Wxapp'
        }
      })
    },
    async authorize() {
      this.$router.push({
        name: 'diandi-subscription-wxmp-account-manage-authcode'
      })
    },
    async getWeChatInfo() {
      // 假设这是一个返回Promise的异步函数，用于获取微信小程序信息
      // 这里应该包含与后端交互的逻辑，获取微信小程序的信息
      // 示例中直接返回模拟数据
      fetchConfigInfo().then(res => {
        this.wechatInfo = res.data
        this.open = res.data.open
        this.isAuthorized = !!res.data.id
        console.log('fetchConfigInfo-res', res, this.isAuthorized)// 获取微信小程序信息成功
      }).catch(err => {
        this.isAuthorized = false
        console.log('fetchConfigInfo-err', err)// 获取微信小程序信息失败
      })
    }
  }
}
</script>

  <style scoped>
  .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .qrcode img {
    width: 200px;
    height: 200px;
  }

  .技术参数 ul {
    list-style: none;
    padding: 0;
  }

  .技术参数 li {
    margin-bottom: 10px;
  }
  </style>
